<template>
  <div class="like">
    <h1>
      <span>猜你喜欢</span>
    </h1>
    <ul>
      <li v-for="(item, index) in likeList" :key="index">
        <div class="likeImage">
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="likeName">
          {{ item.name }}
        </div>
        <div class="likePrice">
          <i>￥</i>
          <span>{{ item.price }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      likeList: [
        {
          id: 1,
          name: "2022春茶明前龙井飞花2022春茶明前龙井飞花",
          imgUrl: "./images/like.jpeg",
          price: 299,
        },
        {
          id: 2,
          name: "2022春茶明前龙井飞花",
          imgUrl: "./images/like.jpeg",
          price: 299,
        },
        {
          id: 3,
          name: "2022春茶明前龙井飞花",
          imgUrl: "./images/like.jpeg",
          price: 299,
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.like {
  width: 100%;
  margin-top: 0.4267rem;
  background-color: #fff;

  h1 {
    text-align: center;
    padding: 0.4rem 0;
    font-size: 0.5rem;
    color: #333333;
    span {
      position: relative;
      display: inline-block;
      &::before {
        content: "";
        position: absolute;
        width: 0.2133rem;
        height: 0.2133rem;
        border-radius: 50%;
        display: block;
        background: #d4c0a7;
        top: 50%;
        left: -0.5rem;
        margin-top: -0.0533rem;
      }
      &::after {
        content: "";
        position: absolute;
        width: 0.2133rem;
        height: 0.2133rem;
        border-radius: 50%;
        display: block;
        background: #d4c0a7;
        top: 50%;
        right: -0.5rem;
        margin-top: -0.0533rem;
      }
    }
  }
  ul {
    display: flex;
    flex-flow: row wrap;
    li {
      width: 4.6933rem;
      height: 6.6667rem;
      .likeImage {
        margin: 0.2667rem 0 0 0.2133rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .likeName {
        width: 90%;
        padding: 0.2133rem 0;
        margin: 0 0.1333rem;
        font-size: 0.4rem;
        line-height: 0.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .likePrice {
        color: #b0352f;
        // height: 0.5rem;
        i {
          font-size: 0.34rem;
        }
        span {
          font-size: 0.5rem;
          font-weight: normal;
        }
      }
    }
  }
}
</style>